<template>
    <div class="service common__color-F0F0F0 common__padding-bottom">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">{{ $t('moreService') }}</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>

        <div v-for="(serverType,index) in serverMenuType" :key="index">
            <group-title v-if="serverType!='base'">{{serverType}}</group-title>
            <grid :cols="4" class="service-grid service--top">
                <grid-item @click.native="goMenu(menu)" v-for="menu in serverMenu[serverType]" :key="menu.id" class="service-griditem">
                    <!-- <img slot="icon" src="~assets/x3/service/service_dzbd.png"> -->
                    <img slot="icon" :src="menu.imgUrl">
                    <span slot="label">{{menu.serviceCname}}</span>
                </grid-item>
            </grid>
        </div>

        <!-- 在线客服的点击元素，该元素必须在初始化就有，否则会引起客服浮窗失效 -->
        <!-- <div class="zhiCustomBtn"></div> -->
    </div>
</template>
<script>
import Menu from 'src/js/menu';
import { PopState, FooterIndex, TO_TYPE, Mutations, FooterShow, RouteUrl } from 'src/common/const';
import { Grid, GridItem, GroupTitle, XHeader } from 'vux';
import { mapState } from 'vuex';
import onlineCustomerService from "src/js/onlineCustomerService";//引入在线客服js
export default {
    computed: mapState(['serverMenu', 'serverMenuType', "isWeChar", "user"]),
    components: {
        isCh: true,
        XHeader,
        Grid,
        GridItem,
        GroupTitle
    },
    methods: {
        goMenu(menu) {
            let data = {
                _this: this,
                menu: menu
            }
            if (menu.serviceType === "在线客服") {
                // onlineCustomerService.onlineClickOfMobile(this, menu.serviceUrl);
                //触发在线客服的click事件，IOS系统在使用.native修饰符时，需要调用2次才能触发到click
                if (localStorage["BOTYPE"] == "I") {
                    $(".zhiCustomBtn").trigger("click");
                    $(".zhiCustomBtn").trigger("click");
                } else {
                    $(".zhiCustomBtn").trigger("click");
                    // $(".zhiCustomBtn").trigger("click");
                }
                return;
            }
            Menu.goMenu(data);
        },
        goBack() {
            this.$common.goBack(this);
        }
    },
    beforeDestroy() {
        this.$common.storeCommit(this, Mutations.IS_SHOW_ROUTE_RED, false);
    },
    mounted() {
        this.$common.storeCommit(this, Mutations.IS_SHOW_ROUTE_RED, true);

        sessionStorage["SERVICE_GOBACK_URL"] = RouteUrl.SERVICE;
        document.title = '恒华出行宝';
        let _this = this;
        this.isCh = this.$common.getIsCh(this);
        this.$init.indexInit(this, FooterIndex.SERVICE);

        let data = { product: "", user: "" };
        if (this.user.isLogin) {
            data.user = this.user.userDto;
        }
        //远程加载在线客服js
        onlineCustomerService.initJsFile(this, data);
    },
}
</script>


<style lang="scss" scoped>
.service--top {
  margin-top: 10px;
}

.service-grid {
  background-color: #fff !important;
  margin-left: 10px;
  margin-right: 10px;
}

.service-griditem {
  height: 98px;
  div {
    width: 41px;
    height: 41px;
    margin: 0 auto;
  }
  p {
    margin-top: 10px !important;
  }
  span {
    font-size: 13px;
  }
}

.weui-grid {
  padding: 15px 10px !important;
}
</style>





